<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/personal.css">
    <script src="js/echarts.min.js"></script>

    <script src="js/jquery.min.js"></script>
    <!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
    <script src="js/footer.js"></script>
    <title>数据统计</title>
</head>

<body>
    <!-- header模块 -->
    <div class="header">
        <div class="w">
            <div class="logo fl">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <ul class="fl">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="study.html">学习中心</a>
                </li>
                <li>
                    <a href="news.html">校园资讯</a>
                </li>
                <li class="active">
                    <a href="personal-course.html">个人中心</a>
                </li>
                <li>
                    <a href="message.html">留言</a>
                </li>
            </ul>
            <!-- 搜索框 -->
            <div class="input-search fl">
                <input type="search" class="search" id="search" placeholder="搜索...">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <!-- 登录注册按钮 -->
            <div class="fl">
                <a href="javascript:;" class="login">登录/注册</a>
            </div>
        </div>
    </div>
    <!-- 背景图片 -->
    <div class="banner">
        <img src="images/news_banner.jpg" alt="">
    </div>
    <!-- 主体模块 -->
    <div class="main">
        <div class="w">
            <!-- 侧边栏 -->
            <div class="main-left fl">
                <div class="title">
                    <h1>个人中心</h1>
                    <img src="images/username.jpg" alt="">
                    <span style="display:block; color:#535252;"> <span class="glyphicon glyphicon-user" style="color:#8a8989;"></span> &nbsp;不学习，变垃圾</span>
                </div>
                <ul>
                    <li>
                        <span class="glyphicon glyphicon-film"></span>
                        <a href="personal-course.html">我的课程</a>
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-bullhorn"></span>
                        <a href="personal-news.html">资讯中心</a>
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </li>
                    <li class="active">
                        <span class="glyphicon glyphicon-signal"></span>
                        <a href="javascript:;">数据统计</a>
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-cog"></span>
                        <a href="personal-settings.html">个人设置</a>
                        <span class="glyphicon glyphicon-menu-right"></span>
                    </li>
                </ul>
            </div>
            <!-- 数据统计 -->
            <div class="data fl">
                <div class="data-title">
                    <ul>
                        <li>
                            <h1>今日学习时长</h1>
                            <span><img src="images/time1.png" alt=""></span>
                            <span>5 小时</span>
                        </li>
                        <li>
                            <h1 style="color:#25a699;">累计学习时长</h1>
                            <span><img src="images/time2.png" alt=""></span>
                            <span>39 小时</span>
                        </li>
                        <li>
                            <h1 style="color:#ed8c9d;">已学完课程数</h1>
                            <span><img src="images/my-course1.png" alt=""></span>
                            <span>10 门</span>
                        </li>
                        <li>
                            <h1 style="color:#f1cd2d;">未学完课程数</h1>
                            <span><img src="images/my-course2.png" alt=""></span>
                            <span>3 门</span>
                        </li>
                    </ul>
                </div>
                <!-- 柱形图 -->
                <div class="column-chart-box fl">
                    <h1>
                        <img src="images/data.png" alt="">
                        <a href="javascript:;">本周学习时间统计</a>
                    </h1>
                    <div class="column-chart" style="clear:both;"></div>
                </div>
                <!-- 折线图 -->
                <div class="line-chart-box fl">
                    <h1>
                        <img src="images/active.png" alt="">
                        <a href="javascript:;">课堂活跃度</a>
                    </h1>
                    <div class="line-chart"></div>
                </div>
                <!-- 饼图 -->
                <div class="pie-chart fl"></div>
                <!-- 表格 -->
                <div class="table-chart fl">
                    <table class="table table-striped">
                        <tr>
                            <th>#</th>
                            <th>课程性质</th>
                            <th>专业领域</th>
                            <th>学习时长/h</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>专业基础</td>
                            <td>大数据</td>
                            <td>18</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>综合实践</td>
                            <td>全栈开发</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>专业核心</td>
                            <td>人工智能</td>
                            <td>35</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>专业拓展</td>
                            <td>区块链</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>专业核心</td>
                            <td>大数据</td>
                            <td>43</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- footer模块 -->
    <div class="footer">
        <div class="w">
            <div class="top">
                <div class="fl">
                    <div class="logo">
                        <a href="index.html"><img src="images/logo.png" alt=""></a>
                    </div>
                    <h5>用户在高强度、压抑的学习中，可以分享学习成果，记录心情!</h5>
                </div>
                <div class="fl">
                    <ul>
                        <li>
                            <h3>关于我们</h3>
                            <a href="javascript:;">集团概况</a>
                            <a href="javascript:;">集团部门</a>
                            <a href="javascript:;">发展历史</a>
                            <a href="javascript:;">法律条款</a>
                        </li>
                        <li>
                            <h3>联系我们</h3>
                            <a href="javascript:;">常见问题</a>
                            <a href="javascript:;">意见反馈</a>
                            <a href="javascript:;">资讯投稿</a>
                            <a href="javascript:;">加入我们</a>
                        </li>
                        <li>
                            <h3>关注我们</h3>
                            <div class="wechat">
                                <img src="images/wechat.png" alt="" id="wechat">
                            </div>
                            <div class="weibo">
                                <img src="images/weibo.png" alt="" id="weibo">
                            </div>
                        </li>
                        <li style="margin-right:0;">
                            <h3>友情链接</h3>
                            <a href="javascript:;">Study课堂</a>
                            <a href="javascript:;">Study集团</a>
                            <a href="javascript:;">Study</a>
                        </li>
                    </ul>
                </div>
                <div class="code" id="code">
                    <img src="images/code.png" alt="">
                </div>
                <span class="angle" id="angle"></span>
            </div>
            <div class="bottom">
                <div>
                    广西来宾市兴宾区铁北大道966号 邮编:123456 Email:abcdefg@xxx.edu.cn <br>
                </div>
                <div>
                    <a href="javascript:;"> 桂ICP备123456789号 </a> 版权所有 © 广西科技师范学院
                </div>

                <div style="margin-bottom:0;">
                    桂公网安备 1234567890号
                </div>
            </div>
        </div>
    </div>
    <script>
        // 柱形图
        var myChart = echarts.init(document.querySelector('.column-chart'));
        var option = {
            color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1, [{
                        offset: 0,
                        color: "skyblue"
                    }, // 0 起始颜色
                    {
                        offset: 1,
                        color: "#409eff"
                    } // 1 结束颜色
                ]
            ),
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                borderColor: "rgba(0, 240, 255, 0.3)"
            },
            xAxis: [{
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "#969697"
                },
                // x轴这条线的颜色样式
                axisLine: {
                    lineStyle: {
                        color: "#ccc"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    color: "#969697"
                },
                axisLine: {
                    lineStyle: {
                        color: "#ccc"
                    }
                }
            }],
            series: [{
                name: '学习时间/h',
                type: 'bar',
                barWidth: '40%',
                data: [5, 2, 3.5, 7.2, 7, 1.9, 6]
            }],

        };
        myChart.setOption(option);
        // 等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
        // 折线图
        var myChart = echarts.init(document.querySelector('.line-chart'));
        var option = {
            color: ["#ed8c9d", "#25a699", "#409eff"],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['讨论次数', '回答次数', '签到率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                axisLabel: {
                    color: "#969697"
                },
                // x轴这条线的颜色样式
                axisLine: {
                    lineStyle: {
                        color: "#ccc"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: "#969697"
                },
                // x轴这条线的颜色样式
                axisLine: {
                    lineStyle: {
                        color: "#ccc"
                    }
                }
            },
            series: [{
                name: '讨论次数',
                type: 'line',
                stack: 'Total',
                data: [11, 15, 6, 10, 19, 9, 5]
            }, {
                name: '回答次数',
                type: 'line',
                stack: 'Total',
                data: [2, 8, 9, 3, 9, 3, 1]
            }, {
                name: '签到率',
                type: 'line',
                stack: 'Total',
                data: [5, 3, 2, 5, 9, 3, 1]
            }]
        };
        myChart.setOption(option);
        // 等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
        // 饼图
        var myChart = echarts.init(document.querySelector('.pie-chart'));
        var option = {
            color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff"
            ],
            title: {
                text: '参与课程分类占比',
                subtext: '分类比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: [
                    'rose1',
                    'rose2',
                    'rose3',
                    'rose4',
                    'rose5'
                ]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '课程性质分类',
                type: 'pie',
                radius: ["13%", "28%"],
                center: ["23%", "50%"],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    show: false,
                    fontSize: 8
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 18,
                    // 连接到文字的线长度
                    length2: 5
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: [{
                    value: 40,
                    name: '大数据'
                }, {
                    value: 33,
                    name: '人工智能'
                }, {
                    value: 28,
                    name: '区块链'
                }, {
                    value: 22,
                    name: '算法进阶'
                }, {
                    value: 20,
                    name: '全栈开发'
                }]
            }, {
                name: '专业领域分类',
                type: 'pie',
                radius: [10, 65],
                center: ['66%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 8,
                    // 连接到文字的线长度
                    length2: 5
                },
                data: [{
                    value: 30,
                    name: '专业核心课程'
                }, {
                    value: 28,
                    name: '通识教育课程'
                }, {
                    value: 26,
                    name: '专业拓展课程'
                }, {
                    value: 24,
                    name: '专业基础课程'
                }, {
                    value: 22,
                    name: '综合实践课程'
                }]
            }]
        };
        myChart.setOption(option);
        // 等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    </script>
</body>

</html>